<template>
  <div class="process">
    <TopHeader></TopHeader>
    <div class="mainTitle">
      <div class="container headArea">
        <div class="title">请选择一项测评</div>
        <div class="testProcess" v-if="finishTestCount < 5">
          <div class="tip">当前测试进度</div>
          <div class="count">
            <div class="finishNum">{{ finishTestCount }}</div>
            <div class="totalNum">/5</div>
          </div>
        </div>
        <div v-else class="createTotalReport" @click="handleCreateTotalReport">
          <div class="createBtn">生成综合报告</div>
          <div class="reportTip">
            <img src="../assets/login/icon_shengchengjieguo.png" alt="">
            <span>立即生成综合报告～</span>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="evaluationList">
        <div class="evaluationItem" @click="handleStartTest('mbti')">
          <div class="startOneTest" v-show="finishTestCount == 0">
            <img src="../assets/login/icon_start.png" alt="">
            <div class="startTip">开始你的第一项测评吧～</div>
          </div>
          <div class="hasFinishItem" v-show="model_mbti"><img src="../assets/login/jiaobiao.png" alt=""></div>
          <div class="iconImage">
            <img src="../assets/login/pic_mbti.png" alt="">
          </div>
          <div class="itemName">MBTI性格测试</div>
          <div class="itemDescribe">性格乃人之行为习惯，辨识自己的性格，找到符合性格的学习方式和未来专业方向。</div>
        </div>
        <div class="evaluationItem" @click="handleStartTest('interest')">
          <div class="hasFinishItem" v-show="model_interest"><img src="../assets/login/jiaobiao.png" alt=""></div>
          <div class="iconImage">
            <img src="../assets/login/pic_xingquceshi.png" alt="">
          </div>
          <div class="itemName">兴趣测试</div>
          <div class="itemDescribe">兴趣是最好的老师，找到自己最感兴趣的事情，为以后的人生奠定方向。</div>
        </div>
        <div class="evaluationItem" @click="handleStartTest('zhineng')">
          <div class="hasFinishItem" v-show="model_zhineng"><img src="../assets/login/jiaobiao.png" alt=""></div>
          <div class="iconImage">
            <img src="../assets/login/pic_duoyuanzhineng.png" alt="">
          </div>
          <div class="itemName">多元智能测试</div>
          <div class="itemDescribe">每个人都是独一无二的，挖掘自己的天赋特长，激发自己无限潜能。</div>
        </div>
        <div class="evaluationItem" @click="handleStartTest('values')">
          <div class="hasFinishItem" v-show="model_values"><img src="../assets/login/jiaobiao.png" alt=""></div>
          <div class="iconImage">
            <img src="../assets/login/pic_jiazhiguanceshi.png" alt="">
          </div>
          <div class="itemName">价值观测试</div>
          <div class="itemDescribe">每个人对未来的追求都不同，做回自己，找到未来人生的意义。</div>
        </div>
        <div class="evaluationItem" @click="handleStartTest('growup')">
          <div class="hasFinishItem" v-show="model_growup"><img src="../assets/login/jiaobiao.png" alt=""></div>
          <div class="iconImage">
            <img src="../assets/login/pic_chengzhanghuanjing.png" alt="">
          </div>
          <div class="itemName">成长环境测试</div>
          <div class="itemDescribe">家庭环境决定个人成长环境，将直接影响我们未来选择的专业、职业类型。</div>
        </div>
      </div>
    </div>
  </div>  
</template>

<script>
import ls from 'store2'
import axios from '~/plugins/axios'
import TopHeader from '~/components/topHeader'
import { Message, Loading } from 'element-ui';
export default {
  components: {
    TopHeader,
  },
  data() {
    return {
      finishTestCount: 0, // 完成测试的数量
      model_mbti: false, // MBTI性格测试  ---->  flase==未完成，true==已完成
      model_interest: false, // 兴趣测试  
      model_zhineng: false, // 多元智能测试  
      model_values: false, // 价值观测试  
      model_growup: false, // 成长环境测试  
      loading: null,
      fullscreenLoading: null
    }
  },
  created() {
    this.loading = Loading.service({
      lock: true,
      text: 'Loading',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    });
  },
  mounted() {
    this.getTestFinishResult() 
  },
  
  methods: {
    // 查询测试完成结果
    getTestFinishResult() {
      axios.get('/status').then(res => {
        if (res.character_status == 2) {
          this.model_mbti = true          
          this.finishTestCount = this.finishTestCount + 1
        }
        if (res.interest_status == 2) {
          this.model_interest = true
          this.finishTestCount = this.finishTestCount + 1
        }
        if (res.grown_status == 2) {
          this.model_growup = true
          this.finishTestCount = this.finishTestCount + 1
        }
        if (res.intelligence_status == 2) {
          this.model_zhineng = true
          this.finishTestCount = this.finishTestCount + 1
        }
        if (res.worth_status == 2) {
          this.model_values = true
          this.finishTestCount = this.finishTestCount + 1
        }
      }).catch(err => {
        Message.error(err.response.data.message)
      }).finally(() => {
        this.loading.close() 
      })
    },
    handleStartTest(type) {
      let obj = ''
      if (type == 'mbti') {
        // MBTI性格测试
        if (!this.model_mbti) {
          // 还未完成测试
          this.$router.push({ path: '../tools/mbti' })
        } else {
          // 已经完成过测试
          obj = ls.get('mbtiResult')
          ls.set('resultPar', obj)
          this.$router.push({ path: '../testResult' })
        }

      } else if (type == 'interest') {
        // 兴趣测试
        if (!this.model_interest) {
          // 还未完成测试
          this.$router.push({ path: '../tools/interest' })
        } else {
          // 已经完成过测试
          obj = ls.get('interestResult')
          ls.set('resultPar', obj)
          this.$router.push({ path: '../testResult' })
        }
      } else if (type == 'zhineng') {
        // 多元智能测试
        if (!this.model_zhineng) {
          // 还未完成测试
          this.$router.push({ path: '../tools/zhineng' })
        } else {
          // 已经完成过测试
          obj = ls.get('zhinengResult')
          ls.set('resultPar', obj)
          this.$router.push({ path: '../testResult' })
        }
      } else if (type == 'values') {
        // 价值观测试
        if (!this.model_values) {
          // 还未完成测试
          this.$router.push({ path: '../tools/values' })
        } else {
          // 已经完成过测试
          obj = ls.get('workValuesResult')
          ls.set('resultPar', obj)
          this.$router.push({ path: '../testResult' })
        }
      } else if (type == 'growup') {
        // 成长环境测试
        if (!this.model_growup) {
          // 还未完成测试
          this.$router.push({ path: '../tools/growup' })
        } else {
          // 已经完成过测试
          obj = ls.get('growupResult')
          ls.set('resultPar', obj)
          this.$router.push({ path: '../testResult' })
        }
      }
    },
    // 生成综合报告
    handleCreateTotalReport() {
      this.fullscreenLoading = Loading.service({ fullscreen: true })
      axios.post('/status').then(res => {
        Message.success('报告生成成功！')
        this.$router.push({ path: '../reportRecord' })
      }).catch(err => {
        Message.error(err.response.data.message)
      }).finally(() => {
        this.fullscreenLoading.close()
      })
      
    },
  }
}
</script>

<style lang="less" scoped>
  .process {
    padding-bottom: 100px;
    .mainTitle {
      width: 100%;
      height: 120px;
      border: 2px solid rgba(204,204,204,0.3);
      .headArea {
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title {
          color: #1C2227;
          font-size: 22px;
          line-height: 29px;
          font-weight: bold;
        }
        .testProcess {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .tip {
            color: #282828;
            font-size: 16px;
            line-height: 21px;
            margin-right: 8px;
          }
          .count {
            display: flex;
            justify-content: flex-start;
            align-items: baseline;
            .finishNum {
              color: #FF8A00;
              font-size: 24px;
              line-height: 31px;
              font-weight: bold;
              margin-right: 8px;
            }
            .totalNum {
              color: #282828;
              font-size: 16px;
              line-height: 21px;
              font-weight: bold;
            }
          }
        }
        .createTotalReport {
          position: relative;
          .createBtn {
            color: #fff;
            width: 118px;
            height: 38px;
            line-height: 38px;
            border-radius: 2px;
            background: #FF8A00;
            font-size: 14px;
            font-weight: bold;
            text-align: center;
            cursor: pointer;
          }
          .reportTip {
            background: url('../assets/login/pic_tip_up.png') no-repeat 100% 100%;
            background-size: 100% 100%;
            width: 240px;
            height: 63px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding-left: 40px;
            position: absolute;
            left: -58px;
            top: 38px;
            animation:moveDownAndUp 1s ease-in-out infinite;
            img {
              width: 24px;
              height: 25px;
            }
            span {
              margin-left: 11px;
              color: #6F7880;
              font-size: 14px;
            }
          }
        }
      }
    }
    .evaluationList {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      padding-top: 36px;
      .evaluationItem {
        width: 379px;
        height: 378px;
        cursor: pointer;
        border: 1px solid rgba(28,34,38,0.15);
        border-radius: 4px;
        padding: 33px 24px 35px 24px;
        margin-bottom: 36px;
        margin-right: 31px;
        position: relative;
        .hasFinishItem {
          position: absolute;
          top: -1px;
          right: 0;
          width: 48px;
          height: 49px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .startOneTest {
          width: 240px;
          height: 63px;
          position: absolute;
          top: -64px;
          left: 70px;
          background: url('../assets/login/bg_tip_down.png') no-repeat 100% 100%;
          background-size: 100% 100%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          padding-left: 27px;
          padding-bottom: 10px;
          animation:moveUpAndDown 1s ease-in-out infinite;
          img {
            width: 24px;
            height: 26px;
            margin-right: 8px;
          }
          .startTip {
            color: #6F7880;
            font-size: 14px;
            line-height: 19px;
          }
        }
        .iconImage {
          width: 200px;
          height: 200px;
          margin: 0 auto 20px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .itemName {
          color: #1C2226;
          font-weight: bold;
          font-size: 22px;
          line-height: 30px;
          text-align: center;
        }
        .itemDescribe {
          color: #1C2226;
          font-size: 14px;
          line-height: 26px;
        }
      }
      .evaluationItem:nth-child(3) {
        margin-right: 0;
      }
    }
  }
  @keyframes moveUpAndDown{
    0%{
      top: -64px;
    }
    50%{
      top: -74px;
    }
    100%{
      top: -64px;
    }
  }
  @-webkit-keyframes moveUpAndDown{
    0%{
      top: -64px;
    }
    50%{
      top: -74px;
    }
    100%{
      top: -64px;
    }
  }
  @keyframes moveDownAndUp{
    0%{
      top: 38px;
    }
    50%{
      top: 48px;
    }
    100%{
      top: 38px;
    }
  }
  @-webkit-keyframes moveDownAndUp{
    0%{
      top: 38px;
    }
    50%{
      top: 48px;
    }
    100%{
      top: 38px;
    }
  }
</style>